<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" :checked="isChecked" @change="changeAllTodoChecked(!isChecked)"/>
    </label>
    <span>
          <span>已完成{{selected}}</span> / 全部{{todoList.length}}
        </span>
    <button class="btn btn-danger" @click="deleteSelectedChecked">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "Footer",
  props:['todoList','changeAllTodoChecked','deleteSelectedChecked'],
  data(){
    return{
      isChecked:false,
      selected:0
    }
  },
  watch:{
    todoList:{
      deep:true,
      immediate:true,
      handler(){
        const len = this.todoList.reduce((pre,cur)=>cur.done? pre+1:pre,0)
        this.selected = len
        if(this.todoList.length!==0 && this.todoList.length===len){
          this.isChecked = true
        }else{
          this.isChecked = false
        }
      }
      }
  }
}
</script>

<style scoped>
@import "@/assets/css/Footer.css";
</style>